<template>
    <m-list-construction title="统计概览">
        <template slot="operation"></template>
        <template slot="conditions"></template>
        <template slot="content">
            <div class="box">
                <div class="left">
                    <div class="rows">
                        <div class="cont">
                            <countCard title="收入统计" :cost="0" :yoy="66.7" :qoq="66.7"></countCard>
                        </div>
                        <div class="cont">
                            <countCard title="支出统计" :cost="0" :yoy="66.7" :qoq="66.7"></countCard>
                        </div>
                    </div>
                    <monthTask v-if="isADMIN===true"></monthTask>
                    <expenseCard v-if="isADMIN===false" title="费用分类"></expenseCard>
                </div>
                <div class="right">
                    <div class="rows" v-if="isADMIN===true">
                        <div class="cont">
                            <rankCard title="任务金额Top3" type="sum"></rankCard>
                        </div>
                        <div class="cont">
                            <rankCard title="用户消费Top3" type="user"></rankCard>
                        </div>
                    </div>
                    <ProjectTop v-if="isADMIN===false"></ProjectTop>
                    <TaskTop v-if="isADMIN===false"></TaskTop>
                    <expenseCard v-if="isADMIN===true" title="费用分类"></expenseCard>

                </div>
            </div>
            <IncomeTrend v-if="isADMIN===true"></IncomeTrend>
            <ConsumeTrend v-else></ConsumeTrend>
        </template>
    </m-list-construction>
</template>

<script>
  import io from '@/module/io'
  import store from '@/conf/home/store'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import countCard from './countCard.vue'
  import rankCard from './rankCard.vue'
  import expenseCard from './expenseCard.vue'
  import monthTask from './monthTask.vue'
  import IncomeTrend from './IncomeTrend'
  import ConsumeTrend from './ConsumeTrend'
  import ProjectTop from './ProjectTop'
  import TaskTop from './TaskTop'
  export default {
    name: '_source-index',
    data () {
      return {
        isADMIN: store.state.user.userInfo.userType === 'ADMIN_USER', // 判断是否为管理员
        // admin: 0, // 管理员
        // admin: 1, // 用户
        year: new Date().getFullYear() + ''

      }
    },
    props: {},
    watch: {
      year (newval) {
        if (newval) this.queryProcessInstanceNumsByMonth()
      }
    },
    methods: {
      queryProcessInstanceNumsByMonth () {
        io.get('projects/process-instances/instance-num/month', { year: this.year }).then(res => {
          if (res.code === 0) {
            this.monthList = res.data
          }
        })
      }
    },
    components: { mListConstruction, countCard, rankCard, expenseCard, monthTask, IncomeTrend, ConsumeTrend, ProjectTop, TaskTop }
  }
</script>

<style scoped lang="scss" rel="stylesheet/scss">
/deep/ .box {
    display: flex;
    .left {
        flex: 1;
        .rows {
            display: flex;
            margin: 0 -10px;
        }
        .cont {
            flex: 1;
            height: 230px;
            background: #fff;
            border-radius: 8px;
            position: relative;
            margin: 0 10px;
            margin-top: 20px;
        }

        .monthbox {
            flex: 1;
            height: 240px;
            padding: 10px;
            overflow: hidden;
            background: #ffffff;
            border-radius: 8px;
            margin-top: 20px;
            .title {
                display: flex;
                justify-content: space-between;
            }
            .ns {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: 600;
                text-align: LEFT;
                color: #333;
                line-height: 30px;
                margin-left: 15px;
            }
            .ds {
                margin-left: 520px;
            }
        }
    }
    .right {
        flex: 1;
        margin-left: 20px;
        .rows {
            display: flex;
            margin: 0 -10px;
        }
        .cont {
            flex: 1;
            height: 230px;
            background: #fff;
            border-radius: 8px;
            margin: 0 10px;
            margin-top: 20px;
            position: relative;
            /* margin-left: 20px; */
        }
        .listcont {
            // position: absolute;
            flex: 1;
            height: 235px;
            background: #ffffff;
            border-radius: 8px;
            margin-top: 20px;
            .name {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: 600;
                text-align: LEFT;
                color: #333333;
                line-height: 40px;
                margin-left: 15px;
                margin-top: 10px;
            }
        }
    }
}
</style>
